<template>
  <div>
    <el-row>
      <el-col :span="24" style="margin-bottom:20px">
        <div>
          <div>
            <table class="userInfoEditTable" style="border-collapse:collapse;background-color:white;" width="100%" cellspacing="0">
              <tr >
                <td colspan="21" class="header" align="center">
                  实有人口数据汇总统计
                </td>
              </tr>
              <tr style="background:#ededed">
                <td>地区/类型</td>
                <td v-for="(v,index) in area" :key="index">{{v}}</td>
                <td>合计</td>
              </tr>
              <tr >
                <td>户籍人口</td>
                <td v-for="(v,index) in area" :key="index">
                  {{huji[index]}}
                </td>
                <td>
                  {{getSum(huji)}}
                </td>
              </tr>
              <tr style="background:#ededed">
                <td>流动人口</td>
                <td v-for="(v,index) in area" :key="index">
                  {{ld[index]}}
                </td>
                <td>{{getSum(ld)}}</td>
              </tr>
              <tr >
                <td>留守人口</td>
                <td v-for="(v,index) in area" :key="index">
                  {{ls[index]}}
                </td>
                <td>{{getSum(ls)}}</td>
              </tr>
              <tr style="background:#ededed">
                <td>小计</td>
                <td v-for="(v,index) in area" :key="index">
                  {{huji[index]+ld[index]+ls[index]}}
                </td>
                <td>
                  {{getSum(huji)+getSum(ld)+getSum(ls)}}
                </td>
              </tr>
            </table>
          </div>
        </div>
      </el-col>
      <el-col :span="16">
        <div id="pphistogram" style="width:100%;height:600px;"></div>
      </el-col>
      <el-col :span="8">
        <el-row>
          <el-col :span="24">
            <div align="center" id="histogram" style="width:100%; height:300px"></div>
          </el-col>
          <el-col :span="24">
            <div align="center" id="histogram2" style="width:100%; height:300px"></div>
          </el-col>

        </el-row>
      </el-col>
      <el-col :span="24">
        <div align="center" id="histogram3" style="width:100%; height:300px"></div>
      </el-col>

    </el-row>

    <el-dialog :title="title" :visible.sync="visible" size="large">
      <el-tabs v-model="activeName">
        <el-tab-pane label="户籍人口" name="first">
          <el-row>
            <el-col :span="24" style="padding-top:10px">
              <el-table :data="hjData" border style="width:100%">
                <el-table-column style="width:50px" label="编号" prop="servedPersonID" align="center">
                </el-table-column>
                <el-table-column label="姓名" prop="name" align="center">
                </el-table-column>
                <el-table-column label="性别" prop="sex" align="center">
                  <template scope="scope">
                    {{sexs.filter(i=>{if(i.v==scope.row.sex)return i})[0].l}}
                  </template>
                </el-table-column>
                <el-table-column label="政治面貌" prop="politics" align="center">
                </el-table-column>
                <el-table-column label="身份证号" width="300px" prop="certifID" align="center">
                </el-table-column>
                <el-table-column label="出生日期" prop="birthDate" align="center">
                </el-table-column>
                <el-table-column label="职业" prop="career" align="center">
                </el-table-column>
                <el-table-column label="移动电话" prop="mobileTel" align="center">
                </el-table-column>
                <el-table-column label="操作" width="300" align="center">
                  <template scope="scope">
                    <el-button type="text" @click="watchDetail(scope.row.certifID)" size="small">查看详情</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="24" style="margin-top:10px" align="right">
              <el-pagination layout="prev, pager, next" :total="hjfilters.totalInfo" @current-change="handleCurrentChange">
              </el-pagination>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="流动人口" name="second">
          <el-row>
            <el-col :span="24" style="padding-top:10px">
              <el-table :data="ldData" border style="width:100%">
                <el-table-column style="width:50px" label="编号" prop="servedPersonID" align="center">
                </el-table-column>
                <el-table-column label="姓名" prop="name" align="center">
                </el-table-column>
                <el-table-column label="性别" prop="sex" align="center">
                  <template scope="scope">
                    {{sexs.filter(i=>{if(i.v==scope.row.sex)return i})[0].l}}
                  </template>
                </el-table-column>
                <el-table-column label="政治面貌" prop="politics" align="center">
                </el-table-column>
                <el-table-column label="身份证号" width="300px" prop="certifID" align="center">
                </el-table-column>
                <el-table-column label="出生日期" prop="birthDate" align="center">
                </el-table-column>
                <el-table-column label="职业" prop="career" align="center">
                </el-table-column>
                <el-table-column label="移动电话" prop="mobileTel" align="center">
                </el-table-column>
                <el-table-column label="操作" width="300" align="center">
                  <template scope="scope">
                    <el-button type="text" @click="watchDetail(scope.row.certifID)" size="small">查看详情</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="24" style="margin-top:10px" align="right">
              <el-pagination layout="prev, pager, next" :total="ldfilters.totalInfo" @current-change="handleCurrentChange2">
              </el-pagination>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="留守人口" name="third">
          <el-row>
            <el-col :span="24" style="padding-top:10px">
              <el-table :data="lsData" border style="width:100%">
                <el-table-column style="width:50px" label="编号" prop="servedPersonID" align="center">
                </el-table-column>
                <el-table-column label="姓名" prop="name" align="center">
                </el-table-column>
                <el-table-column label="性别" prop="sex" align="center">
                  <template scope="scope">
                    {{sexs.filter(i=>{if(i.v==scope.row.sex)return i})[0].l}}
                  </template>
                </el-table-column>
                <el-table-column label="政治面貌" prop="politics" align="center">
                </el-table-column>
                <el-table-column label="身份证号" width="300px" prop="certifID" align="center">
                </el-table-column>
                <el-table-column label="出生日期" prop="birthDate" align="center">
                </el-table-column>
                <el-table-column label="职业" prop="career" align="center">
                </el-table-column>
                <el-table-column label="移动电话" prop="mobileTel" align="center">
                </el-table-column>
                <el-table-column label="操作" width="300" align="center">
                  <template scope="scope">
                    <el-button type="text" @click="watchDetail(scope.row.certifID)" size="small">查看详情</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="24" style="margin-top:10px" align="right">
              <el-pagination layout="prev, pager, next" :total="lsfilters.totalInfo" @current-change="handleCurrentChange3">
              </el-pagination>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <el-dialog title="查看详情" :visible.sync="visible2">
      <info :id="id"></info>
    </el-dialog>
  </div>
</template>

<script>
import * as api from "@/api/realpopulation/index";
import * as api2 from "@/api/zonghezhili/duiwujianshe";
import info from "./personInfo";
export default {
  components: {
    info
  },
  data() {
    return {
      activeName: "first",
      histogram: null,
      area: [],
      type: ["户籍人口", "流动人口", "留守人口"],
      huji: [],
      ld: [],
      ls: [],
      title: "",
      visible: false,
      visible2: false,
      sexs: [
        {
          v: "0",
          l: "未知的性别"
        },
        {
          v: "1",
          l: "男性"
        },
        {
          v: "2",
          l: "女性"
        },
        {
          v: "9",
          l: "未说明性别"
        }
      ],
      areaData: [
        { netGridID: 1, netGridName: "南巷村" },
        { netGridID: 2, netGridName: "新塘村" },
        { netGridID: 3, netGridName: "九华村" },
        { netGridID: 4, netGridName: "后塘村" },
        { netGridID: 5, netGridName: "大卓村" },
        { netGridID: 6, netGridName: "黄梅村" },
        { netGridID: 7, netGridName: "下荫村" },
        { netGridID: 8, netGridName: "莲塘村" },
        { netGridID: 9, netGridName: "赤岗社区" },
        { netGridID: 10, netGridName: "石狮村" },
        { netGridID: 11, netGridName: "杨塘岗社区" },
        { netGridID: 12, netGridName: "姚徐村" },
        { netGridID: 13, netGridName: "河桥村" },
        { netGridID: 14, netGridName: "后莘村" },
        { netGridID: 15, netGridName: "杜家山村" },
        { netGridID: 16, netGridName: "三里井社区" },
        { netGridID: 17, netGridName: "西庙社区" },
        { netGridID: 18, netGridName: "三台阁社区" },
        { netGridID: 19, netGridName: "寨里社区" }
      ],
      hjData: [],
      ldData: [],
      lsData: [],
      hjfilters: {
        netGridID: null,
        page: 1,
        pageSize: 10,
        totalInfo: 0,
        servedPersonTypeValue: "01"
      },
      ldfilters: {
        netGridID: null,
        page: 1,
        pageSize: 10,
        totalInfo: 0,
        servedPersonTypeValue: "02"
      },
      lsfilters: {
        netGridID: null,
        page: 1,
        pageSize: 10,
        totalInfo: 0,
        servedPersonTypeValue: "03"
      },
      id: 0,
      histogram2: null,
      histogram3: null
    };
  },
  methods: {
    watchDetail(id) {
      this.id = id;
      this.visible2 = true;
    },
    // 绘制柱状图
    drawHistogram2(cun, datas) {
      this.histogram2 = echarts.init(document.getElementById("histogram2"));
      this.histogram2.setOption({
        color: ["#00CED1"],
        title: {
          text: "流动人口分布情况"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        legend: {
          data: cun
        },
        xAxis: [
          {
            type: "category",
            data: cun,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel:{
              interval:0,
              rotate:-45
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "流动人口",
            type: "bar",
            barWidth: "50%",
            data: datas
          }
        ]
      });
    },
    // 绘制柱状图
    drawHistogram3(cun, datas) {
      this.histogram3 = echarts.init(document.getElementById("histogram3"));
      this.histogram3.setOption({
        color: ["#4169E1"],
        title: {
          text: "留守人口分布情况"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        legend: {
          data: cun
        },
        xAxis: [
          {
            type: "category",
            data: cun,
            axisTick: {
              alignWithLabel: true
            },

          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "留守人口",
            type: "bar",
            barWidth: "50%",
            data: datas
          }
        ]
      });
    },
    // 绘制柱状图
    drawHistogram(cun, datas) {
      this.histogram = echarts.init(document.getElementById("histogram"));
      this.histogram.setOption({
        color: ["#c23531"],
        title: {
          text: "常住人口分布情况"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        legend: {
          data: cun
        },
        xAxis: [
          {
            type: "category",
            data: cun,
            axisTick: {
              alignWithLabel: true
            },
            axisLabel:{
              interval:0,
              rotate:-45
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "常住人口",
            type: "bar",
            barWidth: "50%",
            data: datas
          }
        ]
      });
    },
    initCharts(area, type, huji, ld, ls) {
      this.histogram = echarts.init(document.getElementById("pphistogram"));
      this.histogram.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        title: {
          text: "开发区各村人口分布堆叠图"
        },
        legend: {
          data: type
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value"
        },
        yAxis: {
          type: "category",
          data: area
        },
        series: [
          {
            name: "户籍人口",
            type: "bar",
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "insideLeft"
              }
            },
            data: huji
          },
          {
            name: "流动人口",
            type: "bar",
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "insideLeft"
              }
            },
            data: ld
          },
          {
            name: "留守人口",
            type: "bar",
            stack: "总量",
            label: {
              normal: {
                show: true,
                position: "insideLeft"
              }
            },
            data: ls
          }
        ]
      });

      this.histogram.on("click", ({ name }) => {
        this.title = name + "实有人口数据";
        let id = this.getAreaIDByName(name);
        this.hjfilters.netGridID = id;
        this.ldfilters.netGridID = id;
        this.lsfilters.netGridID = id;
        this.getResidentInfo();
        this.getFloatingPersonInfo();
        this.getStayedPersonInfo();
        this.visible = true;
      });
    },
    handleCurrentChange(val) {
      this.hjfilters.page = val;
      this.getResidentInfo();
    },
    handleCurrentChange2(val) {
      this.ldfilters.page = val;
      this.getFloatingPersonInfo();
    },
    handleCurrentChange3(val) {
      this.lsfilters.page = val;
      this.getStayedPersonInfo();
    },
    // 获取常住人口的信息
    getResidentInfo() {
      api2.fetchServedMemberInfo(this.hjfilters).then(res => {
        this.hjData = res.data.queryVO;
        this.hjfilters.totalInfo = res.data.page.totalCount;
      });
    },
    getFloatingPersonInfo() {
      api2.fetchServedMemberInfo(this.ldfilters).then(res => {
        this.ldData = res.data.queryVO;
        this.ldfilters.totalInfo = res.data.page.totalCount;
      });
    },
    getStayedPersonInfo() {
      api2.fetchServedMemberInfo(this.lsfilters).then(res => {
        this.lsData = res.data.queryVO;
        this.lsfilters.totalInfo = res.data.page.totalCount;
      });
    },
    getAreaIDByName(name) {
      return this.areaData.filter(m => {
        if (m.netGridName == name) {
          return m;
        }
      })[0].netGridID;
    },
    getSum(data) {
      let sum = 0;
      for (let i = 0; i < data.length; i++) {
        sum += data[i];
      }
      return sum;
    }
  },
  mounted() {
    this.$store.commit("INIT_PAGE", "");
    api.getServedHistogramCount("01").then(res => {
      let cun = res.data[0];
      let datas = res.data[1];
      this.drawHistogram(cun, datas);
    });
    api.getServedHistogramCount("02").then(res => {
      let cun = res.data[0];
      let datas = res.data[1];
      this.drawHistogram2(cun, datas);
    });
    api.getServedHistogramCount("03").then(res => {
      let cun = res.data[0];
      let datas = res.data[1];
      this.drawHistogram3(cun, datas);
    });
    api.getServedPersonCount().then(res => {
      this.area = res.data[0];
      this.type = res.data[1];
      this.huji = res.data[2];
      this.ld = res.data[3];
      this.ls = res.data[4];
      this.initCharts(this.area, this.type, this.huji, this.ld, this.ls);
    });
  }
};
</script>
<style scoped>
.userInfoEditTable,
.userInfoEditTable td {
  padding: 10px;
  text-align: center;
}

.tb_label {
  width: 12%;
}

.header {
  font-weight: bold;
  color: white;
  background: black;
}

.mycolor {
  background-color: #ededed;
  /* cursor: pointer; */
}
</style>
